<template>
	
	<view class="order" v-if="showall" :class="{popupShow:popupShow}">
		<u-navbar title="我的订单" :autoBack="true">
		</u-navbar>
		<!-- <view class="navlist">
	 <view class="navmain">
	 	<view class="navitem" v-for="item in navlist" @click="changenav(item)">
	 		{{item.title}}
			<view class="navline" v-if="item.id==active" >
				
			</view>
	 	</view>
	 </view>
    
	 </view> -->
		<view class="list" v-if="orderlist.length>0">


			<!-- ================= -->
			<view class="listmain" v-for="item in  orderlist">
				<view class="listitem">
					<view class="itemtop">
						<view class="itemtopl" style="display: flex;">
							<view class="hao">
								预约流水号：{{item.ghOrderNo}}
							</view>
							<view class="copy" @click="copy(item)">复制</view>
						</view>
						<view class="itemtopr" style="background-color: #FFF0E3; color: #FF9133;"
							v-if="item.orderState=='101'">
							待支付
						</view>
						<view class="itemtopr" style="background-color: #FFF0E3; color: #FF9133;"
							v-if="item.orderState=='102'">
							待支付
						</view>
						<view class="itemtopr" style="background-color: #F5F6F8; color: #61E002;"
							v-if="item.orderState=='1'">
							已预约
						</view>
						<view class="itemtopr" style="background-color: #FFF1F0; color: #D74D47;"
							v-if="item.orderState=='2'">
							已停诊
						</view>
						<view class="itemtopr" style="background-color: #E7F3E5; color: #20CA00;"
							v-if="item.orderState=='3'">
							已完成
						</view>
						<view class="itemtopr" style="background-color: #E7F3E5; color: #20CA00;"
							v-if="item.orderState=='301'">
							已完成
						</view>
						<view class="itemtopr" style="background-color: #DEEEF4; color: #1A82A9;"
							v-if="item.orderState=='4'">
							已取消
						</view>
						<view class="itemtopr" style="background-color: #DEEEF4; color: #1A82A9;"
							v-if="item.orderState=='401'">
							已取消
						</view>
						<view class="itemtopr" style="background-color: #FFECEF; color: #FE3355;"
							v-if="item.orderState=='5'">
							已违约
						</view>

					</view>
					<view class="docinfo" @click="godetail(item)">
						<view class="docl" v-if="item.doctorImage">
							<!-- <image :src="item.doctorImage" mode="aspectFit"></image> -->
							<u-avatar :src="item.doctorImage" size="45" shape="circle"></u-avatar>
						</view>
						<view class="docl" v-if="!item.doctorImage">
							<image src="../../../static/icons/yimo.png" mode="aspectFit"></image>
						</view>
						<view class="docr">
							<view class="docname">
								{{item.doctorName}} <span>{{item.doctorTitle}}</span>
							</view>
							<view class="hosname">
								{{item.hospitalName?item.hospitalName:""}} {{item.deptName}}
							</view>
						</view>
					</view>
					<view class="itemcon">
						<view class="itemconl">
							就诊时间：
						</view>
						<view class="itemconr">
							{{item.serviceDate}} {{item.weekName}} {{item.sourceTimeShow}}
						</view>
					</view>
					<view class="itemcon">
						<view class="itemconl">
							就 诊 人：
						</view>
						<view class="itemconr">
							{{item.name}}
						</view>
					</view>


					<view class="itemcon">
						<view class="itemconl">
							诊 查 费：
						</view>
						<view class="itemconr">
							{{item.totalFee}} 元 ({{item.payMode}})
						</view>
					</view>
					<view class="itembottom">
						<view class="cancel" @click="cancelgua(item)" v-if="item.isOrderCancel==true">
							取消预约
						</view>
						<view class="detail" v-if="item.isPayOrder==true" @click="godetail(item)">
							去支付
						</view>
						<view class="detail" v-if="item.isOrderDetail==true" @click="godetail(item)">
							查看详情
						</view>
					</view>
				</view>
			</view>

			<u-modal :show="showcancel" cancelText="放弃" confirmText='确定' title="取消原因" :closeOnClickOverlay="true"
				:showCancelButton="true" @cancel="cancel()" @confirm="quxiao()">
				<view class="slot-content">

					<p style="margin-top: 10rpx;">请选择取消原因</p>
					<view style="margin-top: 10rpx;">
						<u-radio-group v-model="radiovalue1" placement="column" @change="groupChange">
							<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in radiolist1"
								:key="index" :label="item.name" :name="item.name" @change="radioChange">
							</u-radio>
						</u-radio-group>
					</view>

					<u--textarea :cursor-spacing='10' v-model="reason" placeholder="其他原因？补充说明" maxlength="100">
					</u--textarea>
					<view class="" style="margin-top: 10rpx;">
						<p>根据平台相关规定，为促进诚信就医。取消订单会扣除个人信誉积分，【普通专家-1分/次，紧俏专家-2分/次（停诊除外）】，多次取消可能导致信誉分过低影响您使用就医服务。确定要取消本次预约吗？
						</p>
					</view>
				</view>
			</u-modal>
		</view>

		<view v-else>
			<view class="" style="text-align: center;height:100vh;">
				<image style="width: 300rpx;height: 200rpx;margin: 0 auto;margin-top: 200rpx;"
					src="../../../static/icons/kongdingd.png" mode="aspectFit"></image>
				<p style="font-size: 24rpx; color: #999;margin-top: -20rpx;">暂无订单记录</p>
			</view>
		</view>
	</view>

</template>

<script>
	import homeApi from '@/api/home'
	import homeApii from '@/api/homee'
	import homeApiii from '@/api/homeee'
	import urlApi from "@/setting.js"
	import {
		reportCmPV
	} from '../../../api/cloudMonitorHelper.js';
	export default {
		data() {
			return {
				popupShow: false,
				radiolist1: [],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				radiovalue1: '',
				reason: "",
				showcancel: false,
				active: "1",
				navlist: [{
						title: "未就诊",
						id: "1"
					},
					{
						title: "历史",
						id: "2"
					}
				],
				token: "",
				orderlist: "",
				guainfo: "",
				showall: false,
				reasonall: "",
				code:""
			}
		},
		onShow() {
			let token = uni.getStorageSync("token")
			if (token) {
				this.token = token
				this.getorder()

			} else {
				this.gettoken()
			}
		},

		onLoad(option) {
			// reportCmPV({
			// 	title: '查询挂号订单',
			// 	option
			// });
			// my.hideShareMenu({
			// 	success(res) {
			// 		console.log('success', res) // {success: true}
			// 	},
			// 	fail(err) {
			// 		console.log('fail', err)
			// 	}
			// })
			this.getreason()
		},

		methods: {
			getuserinfo() {
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				homeApii.getuserinfo({
					token: this.token
				}).then(res => {
					uni.hideLoading()
					console.log(res)
					if (res.code == 4000) {

					} else if (res.code == 4007) {
						uni.switchTab({
							url: "/pages/mine/mine"
						})
					}

				})
			},
			groupChange(n) {
				console.log('groupChange', n);
			},
			radioChange(n) {
				console.log('radioChange', n);
			},
			getreason() {
				homeApiii.getreason({}).then(res => {
					console.log(res)
					this.radiolist1 = res.data
				})
			},
			quxiao() {
				if (this.radiovalue1 || this.reason) {
					this.reasonall = this.radiovalue1 + ":" + this.reason

					// my.requestSubscribeMessage({
					// 	entityIds: [
					// 		'19c7ba4b648e41af9827823b8797aba1',

					// 	],
					// 	success: res => {
					// 		console.log('接口调用成功的回调', res);
					// 		uni.showLoading({
					// 			title: '加载中',
					// 			mask: true
					// 		});
					// 		homeApiii.cancelorder({
					// 			ghOrderNo: this.guainfo.ghOrderNo,
					// 			cancelReson: this.reasonall,
					// 			token: this.token
					// 		}).then(res => {
					// 			uni.hideLoading()
					// 			if (res.code == 4000) {
					// 				this.showcancel = false
					// 				this.popupShow = false
					// 				this.getorder()
					// 				uni.showToast({
					// 					title: "取消成功",
					// 					icon: "none"
					// 				})

					// 			} else {
					// 				uni.showToast({
					// 					title: res.msg,
					// 					icon: "none"
					// 				})
					// 				this.showcancel = false
					// 				this.popupShow = false
					// 				this.getorder()

					// 			}
					// 		})
					// 	},
					// 	fail: err => {
					// 		uni.showLoading({
					// 			title: '加载中',
					// 			mask: true
					// 		});
							homeApiii.cancelorder({
								ghOrderNo: this.guainfo.ghOrderNo,
								cancelReson: this.reasonall,
								token: this.token
							}).then(res => {
								uni.hideLoading()
								if (res.code == 4000) {
									this.showcancel = false
									this.popupShow = false
									this.getorder()

									uni.showToast({
										title: "取消成功",
										icon: "none"
									})
                                   let tmplIds=["I0U-EdeGAqP8FDb85tgnyr28fSjGbL7rGnwbuUR0nAw"]
                                   wx.requestSubscribeMessage({
                                   	tmplIds: tmplIds,
                                   	success(a) {
                                   	
                                   	},
                                   	fail(a) {
                                   
                                   	console.log(a,"失败")
                                   
                                   	}
                                   })


								} else {
									uni.showToast({
										title: res.msg,
										icon: "none"
									})
									this.showcancel = false
									this.popupShow = false
									this.getorder()

								}
							})
					// 		console.log('接口调用失败的回调', err);
					// 	}
					// });


				} else {
					uni.showToast({
						title: "请选择取消原因",
						icon:"none"
					})

				}


			},
			cancel() {
				this.showcancel = false
			},
			cancelgua(item) {
				this.reason = ""
				this.radiovalue1 = ""
				this.reasonall = ""
				this.guainfo = item
				this.showcancel = true
				this.popupShow = true

			},
			gettoken() {
				uni.removeStorageSync("token")
				uni.login({
					provider: 'weixin',
					success: (res) => {
						console.log(res)
						this.code = res.code
						// this.getopenid()
						const authCode = res.authCode;
						homeApii.getopenid({
							code: this.code
						}).then(res => {
							//console.log(res)
							if (res.code == 4000) {
								uni.setStorageSync("token", res.data.token)
								this.$store.state.doc.token = res.data.token
								this.token = res.data.token
								this.getorder()
							}
						})
					},
				})
			},
			godetail(item) {
				uni.navigateTo({
					url: "/pages/mine/orderdetail/orderdetail?ghOrderNo=" + item.ghOrderNo
				})
			},
			shangbao(val){
				let token=uni.getStorageSync("token")
				homeApii.updatedata({
					token:token,
					departmentName:val,
					scene:"0101013"
				}).then(res=>{
					console.log(res)
				})
			},
			getorder() {
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				homeApiii.getorder({
					token: this.token,
					userId: ""
				}).then(res => {
					uni.hideLoading()
					if (res.code == 4000) {
						this.orderlist = res.data
						this.showall = true
						if(this.orderlist.length>0){
							this.shangbao(this.orderlist[0].deptName)
						}else{
							this.shangbao("内科")
						}
					}
					if (res.code == 4011) {
						this.gettoken()
					}
				})
			},
			copy(item) {
				let hao = item.ghOrderNo
				uni.setClipboardData({
					data: hao,
					success: function() {
						uni.showToast({
							title: "复制成功",
							icon: "none"
						})
					}
				});
			},
			goaddpep() {

			},
			changenav(item) {
				this.active = item.id
			}



		}
	}
</script>

<style scoped lang="scss">
	.popupShow {
		overflow: hidden;
		position: fixed;
	}

	.order {
		width: 100%;
		background-color: #F5F6F8;
		padding-bottom: 100rpx;
		overflow: hidden;
padding-top: 200rpx;
		.slot-content {
			font-size: 26rpx;
			line-height: 40rpx;
			color: #606266;
			padding-bottom: 20rpx;
		}

		.list {
			width: 93%;
			margin: 0 auto;
			// margin-top: 20rpx;
			border-radius: 15rpx;
			padding-bottom: 20rpx;
			overflow: hidden;

			.listmain {
				width: 100%;
				margin: 0 auto;
				border-radius: 15rpx;
				background-color: #fff;
				padding-top: 40rpx;
				padding-bottom: 40rpx;
				margin-top: 20rpx;

				.listitem {
					width: 93%;
					margin: 0 auto;

					.itemtop {
						display: flex;
						justify-content: space-between;
						border-bottom: 1rpx solid #f7f7f7;
						padding-bottom: 20rpx;
						margin-bottom: 20rpx;

						.itemtopl {
							font-size: 26rpx;
							color: #333;
							line-height: 40rpx;

							.hao {
								width: 400rpx;
								overflow: hidden;
								white-space: nowrap;
								text-overflow: ellipsis;
								-o-text-overflow: ellipsis;
							}

							.copy {
								font-size: 20rpx;
								color: #333;
								background-color: #efefef;
								padding-left: 10rpx;
								padding-right: 10rpx;
								margin-left: 10rpx;
								line-height: 35rpx;
								height: 35rpx;
								border-radius: 17.5rpx;
							}

						}

						.itemtopr {
							width: 100rpx;
							height: 40rpx;
							border-radius: 5rpx;
							text-align: center;
							font-size: 22rpx;
							line-height: 40rpx;

						}
					}

					.docinfo {
						width: 100%;
						display: flex;
						padding-bottom: 20rpx;

						.docl {
							width: 80rpx;
							height: 80rpx;
							border-radius: 50%;

							image {
								width: 100%;
								height: 100%;
								border-radius: 50%;
							}
						}

						.docr {
							margin-left: 20rpx;
							overflow: hidden;
							width: 550rpx;

							.docname {
								font-size: 28rpx;
								font-weight: bold;
								color: #333;

								span {
									font-size: 24rpx;
									font-weight: normal;
									color: #666666;
									margin-left: 10rpx;
								}
							}

							.hosname {
								font-size: 24rpx;
								font-weight: normal;
								color: #666666;
								margin-top: 10rpx;
							}
						}
					}

					.itemcon {
						width: 100%;
						display: flex;
						justify-content: space-between;
						font-size: 26rpx;
						line-height: 65rpx;

						.itemconl {
							color: #666;
						}

						.itemconr {
							color: #333;
							font-weight: bold;
						}
					}

					.itembottom {
						width: 100%;
						display: flex;
						margin-top: 20rpx;
						justify-content: end !important;
						justify-content: flex-end !important;

						.cancel {
							width: 180rpx;
							height: 70rpx;
							border-radius: 35rpx;
							background-color: #f7f7f7;
							color: #333;
							font-size: 28rpx;
							line-height: 70rpx;
							text-align: center;
						}

						.detail {
							width: 180rpx;
							height: 70rpx;
							border-radius: 35rpx;
							background-color: #417ef7;
							color: #fff;
							font-size: 28rpx;
							line-height: 70rpx;
							text-align: center;
							margin-left: 20rpx;
						}
					}
				}
			}
		}

		.navlist {
			width: 93%;
			margin: 0 auto;
			margin-top: 20rpx;
			border-radius: 15rpx;
			background-color: #fff;
			padding-top: 20rpx;
			padding-bottom: 20rpx;

			.navmain {
				width: 60%;
				margin: 0 auto;
				display: flex;
				justify-content: space-between;

				.navitem {
					width: 100rpx;
					height: 50rpx;
					line-height: 50rpx;
					font-size: 28rpx;
					text-align: center;

					.navline {
						width: 60%;
						margin: 0 auto;
						height: 3rpx;
						background-color: #417ef7;
					}
				}

			}

		}


	}
</style>
